//@import '../../styles/variable.scss';
@import '../../assets/styles/variable.scss';

.zx-topbox{
  font-size: Px(30);
  margin-bottom: Px(24);
  border-radius: 0 0 Px(32) Px(32);
  .topbox-banner{
    height: Px(280);
    margin-top: Px(24);
    margin-left: Px(32);
    margin-right: Px(32);
    border-radius: Px(16);
    .banner-content{
      height: Px(280);
      position: absolute;
      margin-right: Px(32);
      border-radius: Px(16);
      img{
        width: Px(686);
        height: Px(280);
        border-radius: Px(16);
      }
      span{
        // width: Px(638);
        position: relative;
        line-break: anywhere;
        top: Px(-120);
        width: Px(638);
        line-height: Px(48);
        margin-left: Px(24);
        // margin-right: Px(24);
        color: #ffffff;
        font-family: PingFang SC;
        font-size: Px(34);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        z-index: 100;
        // word-break: break-all;
        // word-wrap: break-word;
        // white-space: pre-wrap;
        text-align: left;
      }
      .mask {
        position: fixed;
        top: Px(24);
        left: Px(32);
        width: Px(686);
        height: Px(280);
        // background: rgba(0, 0, 0, .2); /* 半透明黑色 */
        border-radius: Px(16);
        background: linear-gradient(180deg, #00000000 0%, #00000080 100%);
        z-index: 50;
        }
    }
  }
  .topbox-news{
    margin: 0 Px(32);
    margin-top: Px(32);
    .newhead-content {
      margin-top: Px(24);
      .heads-item {
        display: flex;
        padding-bottom: Px(32);
        align-items: center;
        // .item-title{
        //   width: Px(68);
        //   height: Px(40);
        //   line-height: Px(40);
        //   padding: Px(1) Px(3);
        //   margin-top: Px(6);
        //   border-radius: Px(8);
        //   background: rgba(255, 243, 244, 1);
        //   color: rgba(255, 49, 42, 1);
        //   font-family: PingFang SC;
        //   font-size: Px(26);
        //   text-align: center;
        // }
        .heads-item-img{
            width: Px(26);
            height: Px(32);
          img {
            width: Px(26);
            height: Px(32);
            // padding-right: Px(24);
            // display: block;
          }
        }
        
        // .headline-first{
        //   width: Px(26);
        //   height: Px(32);
        //   display: inline-block;
        //   background: url('../../images/firstTab-img/headline-first.png');
        //   background-repeat: no-repeat;
        //   background-size: 100% 100%;
        //   background-position: center;
        //   padding-right: Px(5);
        // }
        // .headline-second{
        //   width: Px(26);
        //   height: Px(32);
        //   display: inline-block;
        //   background: url('../../images/firstTab-img/headline-second.png');
        //   background-repeat: no-repeat;
        //   background-size: 100% 100%;
        //   background-position: center;
        //   padding-right: Px(7);
        // }
        .head-txt {
          // width: Px(594);
          // height: Px(104);
          display: block;
          color: #1d2132;
          font-family: PingFangSC-Regular;
          font-size: Px(34);
          // text-align: justify;
          line-height: Px(46);
          // font-weight: 400;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: Px(24);
          &.night_txt {
            color: #EEEEEE;
          }
          .time{
            line-height: Px(46);
            font-weight: 500;
            font-family: DINPro-Medium;
          }
        }
      }
    }
    .recommend-flash{
      padding-bottom: Px(32);
      .recommend-flash-item{
          display: flex;
          align-items: center;
          .recommend-img{
              width: Px(26);
              height: Px(32);
              display: inline-block;
              background: url('../../images/firstTab-img/headline-third.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-position: center;
              padding-right: Px(20);
            // .recommend-flash-title{
            //   // margin-right: Px(24);
            //   width: 100%;
            //   height: 100%;
            //   // display: block;
            // }
          }
          .recommend-flash-summary{
            // width: Px(594);
            color: #1d2132;
            font-family: PingFangSC-Regular;
            // font-weight: 400;
            font-size: Px(34);
            line-height: Px(46);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: Px(24);
            span{
              font-weight: 500;
              font-family: DINPro-Medium;
            }
            &.night_summary{
              color: #EEEEEE;
            }
          }
        }
    }
  }
}

.zx-item-wrapper {
  padding: 0 Px(32);
  background: #ffffff;
  border-radius: Px(32) Px(32) 0 0;
  .zx-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.5px solid #e4e5e6;
    padding: Px(24) 0;
    &.night_item {
      border-bottom: 0.5px solid #242526;
    }
    .zx-item-left {
      flex: 1;
      max-height: Px(281);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: Px(24) 0;
      .zx-item-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        // text-overflow: ellipsis;
        font-family: PingFangSC-Regular;
        font-size: Px(36);
        color: #242526;
        // text-align: justify;
        line-height: Px(54);
        font-weight: 400;
        margin-bottom: Px(20);
        // background-color: pink;
      }
      .left-stock {
        height: Px(36);
        padding-bottom: Px(20);
        width: Px(50);
        font-size: Px(26);
        visibility: hidden;
      }
      .zx-item-stock {
        position: absolute;
        display: flex;
        // margin-top: Px(16);
        height: Px(44);
        flex-wrap: wrap;
        font-family: PingFangSC-Regular;
        font-size: Px(26);
        color: #999999;
        line-height: Px(44);
        // padding-bottom: Px(12);
        bottom: Px(76);
        z-index: 1;
        // background-color: pink;
        overflow: hidden;
        .stocks {
          // display: flex;
          padding-left: Px(8);
          padding-right: Px(8);
          // text-align: center;
          // align-items: center;
          line-height: Px(44);
          height: Px(44);
          background: #F5F6FA;
          white-space: nowrap;
          &.no-stocks {
            // width: Px(200);
            // background: rgba($color: #242526, $alpha: 0.04);
            border-radius: Px(8);
            color: #1D2132;
            margin-right: Px(8);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(8);
            }
            .nor-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
          &.no-stocks1 {
            // width: Px(200);
            // background: rgba($color: #242526, $alpha: 0.04);
            border-radius: Px(8);
            // color: #242526;
            // margin-right: Px(16);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(8);
            }
            .nor-stockNum {
              color: #1D2132;
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
          &.down {
            // width: Px(200);
            // background: rgba($color: #1aae52, $alpha: 0.04);
            border-radius: Px(8);
            color: #00AF41;
            margin-right: Px(8);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(8);
            }
            .med-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(22);
            }
            .small-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(20);
            }
            .nor-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
          &.down1 {
            // width: Px(200);
            // background: rgba($color: #1aae52, $alpha: 0.04);
            border-radius: Px(8);
            color: #00AF41;
            // margin-right: Px(16);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(4);
            }
            .med-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(22);
            }
            .small-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(20);
            }
            .nor-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
          &.up {
            // width: Px(200);
            // background: rgba($color: #db252a, $alpha: 0.04);
            border-radius: Px(8);
            color: #F7332D;
            margin-right: Px(8);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(4);
            }
            .med-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(22);
            }
            .small-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(20);
            }
            .nor-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
          &.up1 {
            // width: Px(200);
            // background: rgba($color: #db252a, $alpha: 0.04);
            border-radius: Px(8);
            color: #F7332D;
            // margin-right: Px(16);
            .stockName {
              // max-width: Px(104);
              color: #1D2132;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: Px(4);
            }
            .med-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(22);
            }
            .small-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
              max-width: Px(100);
              font-size: Px(20);
            }
            .nor-stockNum {
              font-family: DINPro-Medium, PingFangSC-Regular;
            }
          }
        }
      }
      .zx-item-btm-title {
        font-family: PingFangSC-Regular;
        font-size: Px(26);
        color: #A5A6AD;
        // color: red;
        font-weight: 400;
        height: Px(38);
        .special-style {
          color: #002FA7;
        }
        .zx-item-time {
          font-family: DINPro-Medium, PingFangSC-Regular;
          margin: 0 Px(16);
        }
        .zx-item-read-volumn {
          font-family: DINPro-Medium, PingFangSC-Regular;
        }
        .zx-item-btm-top {
          color: #F7332D;
          .special-style {
            color: #002FA7;
          }
        }
      }
    }
    .right-img {
      width: Px(220);
      height: Px(164);
      margin-left: Px(24);
    }
    .zx-item-right {
      position: absolute;
      width: Px(220);
      top: Px(24);
      height: Px(164);
      overflow: hidden;
      right: 0;
      // margin-bottom: Px(24) 0;
      // background-color: red;
      img {
        position: absolute;
        width: Px(218);
        height: Px(164);
        border-radius: Px(8);
      }
      .zx-item-show-pic-default {
        width: Px(160);
        height: Px(160);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.3);
      }
    }
    .zx-item-right-stock {
      position: absolute;
      width: Px(220);
      height: Px(164);
      overflow: hidden;
      right: 0;
      top: Px(24);
      // background-color: red;
      img {
        position: absolute;
        width: Px(218);
        height: Px(164);
        border-radius: Px(8);
      }
      .zx-item-show-pic-default {
        width: Px(160);
        height: Px(160);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.3);
      }
    }
  }
}






.night-zx-item-wrapper {
  background: #141516;
  .zx-item .zx-item-left {
    .zx-item-title {
      color: #EEEEEE;
    }
    .zx-item-btm-title {
      color: #A0A1A1;
      // color: red;
    }
  }
  // ----------------------------------------------
  .night_item .zx-item-left .zx-item-stock {
    .stocks {
      background: #2B2B2C;
      &.no-stocks {
        color: #EEEEEE;
        .stockName {
          color: #EEEEEE;
        }
      }
      &.no-stocks1 {
        color: #EEEEEE;
        .stockName {
          color: #EEEEEE;
        }
        .nor-stockNum {
          color: #EEEEEE;
        }
      }
      &.down {
        .stockName {
          color: #EEEEEE;
        }
      }
      &.down1 {
        .stockName {
          color: #EEEEEE;
        }
      }
      &.up {
        .stockName {
          color: #EEEEEE;
        }
      }
      &.up1 {
        .stockName {
          color: #EEEEEE;
        }
      }
    }
  }
  // ----------------------------------------------

  
}
.night-zx-item-wrapper .zx-item .zx-item-left .zx-item-btm-title {
  .special-style {
    color: #2677FF;
  }
  .zx-item-btm-top {
    .special-style {
      color: #2677FF;
    }
  }
}

.zx-item-wrapper-elders {
  .zx-item-title {
    font-size: Px(40)!important;
  }
  .zx-item-btm-title {
    font-size: Px(28)!important;
  }
  .zx-item-stock {
    font-size: Px(36)!important;
  }
}
.zx-item-wrapper-elderm {
  .zx-item-title {
    font-size: Px(44)!important;
  }
  .zx-item-btm-title {
    font-size: Px(32)!important;
  }
  .zx-item-stock {
    font-size: Px(36)!important;
  }
}
.zx-item-wrapper-elderl {
  .zx-item-title {
    font-size: Px(48)!important;
  }
  .zx-item-btm-title {
    font-size: Px(36)!important;
  }
  .zx-item-stock {
    font-size: Px(36)!important;
  }
}

.recommend-red {
  .zx-item-wrapper .zx-item .zx-item-left .zx-item-btm-title .special-style {
    color: #F7332D;
  }
}








